<template>
  <view class="nav">
    <!-- #ifdef MP-WEIXIN -->
    <button
      class="login"
      open-type="getUserProfile"
      @click="login"
      v-if="!userInfo.memberName"
    >
      请登录
    </button>
    <button
      type="default"
      v-if="userInfo.memberName && !userInfo.phone"
      class="get-phone"
      @getphonenumber="getUserPhone"
      open-type="getPhoneNumber"
    >
      请授权手机号
    </button>
    <view
      class="member-center"
      @click="toMemberCenter"
      v-if="userInfo.memberName && userInfo.phone"
    >
      <span>{{ userInfo.memberName }}</span>
      会员中心
    </view>
    <!-- #endif -->
    <!-- #ifdef MP-ALIPAY -->
    <button @click="login" onTap="getAuthCode" v-if="!userInfo">
      请登录
    </button>

    <button
      open-type="getAuthorize"
      @getAuthorize="getUserPhone"
      @error="onAuthError"
      scope="phoneNumber"
      v-if="userInfo && !userInfo.phone"
    >
      请授权手机号
    </button>
    <view
      class="member-center"
      @click="toMemberCenter"
      v-if="userInfo && userInfo.phone"
    >
      <text>{{ userInfo.memberName }}</text>
      会员中心
    </view>
    <!-- #endif -->
    <text @click="scanCode" v-if="userInfo">扫码</text>
  </view>
</template>

<script>
import mixins from '@/mixins'
import { getActivity, getBanner, getAliUserInfo } from '@/api'

export default {
  mixins: [mixins],

  methods: {
    scanCode() {
      wx.scanCode({
        success(res) {
          uni.navigateTo({
            url: '/' + res.path
          })
        }
      })
    },
    toMemberCenter() {
      uni.navigateTo({
        url: '/pages/package/member-center/index'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 40rpx 20rpx;
  align-items: center;
  .login {
    padding: 0 20rpx;
  }
  .get-phone {
    background: #fff;
    &::after {
      border: none;
    }
  }
  .member-center {
    background: rgb(219, 42, 42);
    border-radius: 30rpx;
    padding: 10rpx 30rpx;
    color: #fff;
    font-weight: 600;
    display: flex;
    span {
      display: block;
      width: 3em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
